<script setup>
import { ref } from 'vue'
import { Close, Check } from '@element-plus/icons-vue'
import { addFriendApi } from '@/api/user'
import { addGroupApi } from '@/api/group'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
// 获取用户信息
const userStore = useUserStore()
//验证信息
const message = ref('')
//好友分组
const options = ref([1, 2])
//选择的分组
const value = ref('我的好友')
//好友权限
const onlyChat = ref(false)
//空间动态
const invisible = ref(false) //不让他看
const notWatch = ref(false) //不看他的

const props = defineProps({
  item: {
    type: Object,
  },
})

//关闭窗口
const emit = defineEmits(['handleFriendClose'])
const handleClose = () => {
  emit('handleFriendClose')
}

//发送好友申请
const handleSend = async () => {
  const data = ref({})
  //发送请求
  if (!props.item.groupId) {
    data.value = {
      receiverId: props.item.id,
      senderId: userStore.getUser().userId,
      message: message.value,
    }
    await addFriendApi(data.value)
  } else {
    data.value = {
      groupId: props.item.groupId,
      inviterId: userStore.getUser().userId,
      message: message.value,
    }
    await addGroupApi(data.value)
  }
  //提示信息
  ElMessage.success('发送成功')
  //关闭窗口
  handleClose()
  message.value = ''
}
</script>

<template>
  <div class="main-container">
    <!--头部信息-->
    <div class="header">
      <div></div>
      <div class="title">申请好友</div>
      <div class="close-btn">
        <el-link @click="handleClose" underline="never">
          <el-icon><Close /></el-icon
        ></el-link>
      </div>
    </div>
    <!--主体信息-->
    <div class="body">
      <div class="info">
        <div class="img">
          <img :src="props.item.avatar" />
        </div>
        <div class="info-content">
          <div class="name">{{ props.item.name || props.item.username }}</div>
          <div class="account">{{ props.item.account || props.item.groupNumber }}</div>
        </div>
      </div>
      <!--滑轮-->
      <el-scrollbar max-height="340px">
        <div class="message">
          <div>
            <div class="label">填写验证消息</div>
            <el-input type="textarea" resize="none" v-model="message"></el-input>
          </div>
          <div v-if="!props.item.groupId">
            <div class="label">备注</div>
            <el-input></el-input>
            <div class="label">分组</div>
            <div class="el-select">
              <el-select v-model="value" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item" :value="item" />
              </el-select>
            </div>
            <div class="label">好友权限</div>
            <div class="el-switch">
              <div class="all" @click="onlyChat = true">
                <div><img src="@/assets/dynamics.png" />聊天、空间动态等</div>
                <el-icon v-if="onlyChat"><Check /></el-icon>
              </div>
              <div class="only-chat" @click="onlyChat = false">
                <div><img src="@/assets/chat.png" />仅聊天</div>
                <el-icon v-if="!onlyChat"><Check /></el-icon>
              </div>
            </div>
            <div class="label">空间动态</div>
            <div class="el-switch">
              <div class="all">
                <div><img src="@/assets/lock.png" />不让他/她看</div>
                <el-switch v-model="invisible" style="padding: 0; height: 20px"></el-switch>
              </div>
              <div class="only-chat" @click="onlyChat = false">
                <div><img src="@/assets/notVisible.png" />不看他/她的</div>
                <el-switch v-model="notWatch" style="padding: 0; height: 20px"></el-switch>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <!--底部按钮-->
    <div class="footer">
      <div>
        <el-button type="primary" @click="handleSend">发送</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-container {
  z-index: 99;
  position: absolute;
  background-color: #f5f5f5;
  width: 350px;
  height: 500px;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  .header {
    border-bottom: 1px dashed #ccc;
    font-size: 15px;
    div {
      display: flex;
      align-items: center;
    }
    .title {
      margin-left: 10px;
    }

    display: flex;
    justify-content: space-between;
  }
  .body {
    .info {
      margin: 20px;
      img {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
      .info-content {
        margin-left: 10px;
        .name {
          font-size: 14px;
        }
        .account {
          color: #ccc;
          font-size: 12px;
        }
      }

      display: flex;
    }
    .message {
      margin: 20px;
      div {
        margin-bottom: 8px;
      }
      .el-input {
        border: none;
        outline: none;
      }

      .label {
        margin-left: 10px;
        font-size: 13px;
        color: #999;
      }
      .el-switch {
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        div {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        padding: 10px;
        background-color: white;
        height: 55px;
        display: block;
      }
    }
  }
  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
